<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          </el-page-header>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form status-icon label-width="100px">
          <el-form-item label="订单号:" size="small">
            {{detail.order_sn}}
          </el-form-item>
          <el-form-item label="提交时间:" class="demofrom">
            {{detail.create_time|formatDate}}
          </el-form-item>
          <el-form-item label="更新时间:" class="demofrom">
            {{detail.update_time|formatDate}}
          </el-form-item>
          <el-form-item label="初审信息:">
          </el-form-item>
          <el-form-item label="姓名:" class="demofrom">
            {{detail.real_name}}
          </el-form-item>
          <el-form-item label="电话:" class="demofrom">
            {{detail.mobile}}
          </el-form-item>
          <el-form-item label="身份证号码:" class="demofrom">
            {{detail.idcard}}
          </el-form-item>
          <el-form-item label="申请医院:" class="demofrom">
            {{detail.merchant_name}}
          </el-form-item>
        </el-form>
        <el-form status-icon label-width="100px" v-if="detail.order_status>3">
          <el-form-item label="认证信息:">
          </el-form-item>
          <el-form-item label="微信号:" class="demofrom">
            {{detail.letter.wechat}}
          </el-form-item>
          <el-form-item label="QQ号:" class="demofrom">
            {{detail.letter.qq}}
          </el-form-item>
          <el-form-item label="邮箱:" class="demofrom">
            {{detail.letter.email}}
          </el-form-item>
          <el-form-item label="学历:" class="demofrom">
            {{detail.letter.education}}
          </el-form-item>
          <el-form-item label="家庭住址:" class="demofrom">
            {{detail.letter.family_address}}
          </el-form-item>
          <el-form-item label="户籍地址:" class="demofrom">
            {{detail.letter.household_reg_address}}
          </el-form-item>
          <el-form-item label="单位名称:" class="demofrom">
            {{detail.letter.company_name}}
          </el-form-item>
          <el-form-item label="单位地址:" class="demofrom">
            {{detail.letter.company_address}}
          </el-form-item>
          <el-form-item label="工作年限:" class="demofrom">
            {{detail.letter.worker_year}}
          </el-form-item>
          <el-form-item label="职业:" class="demofrom">
            {{detail.letter.duty}}
          </el-form-item>
          <el-form-item label="收入:" class="demofrom">
            {{detail.letter.income}}
          </el-form-item>
          <el-form-item label="紧急联系人:">

          </el-form-item>
          <em v-for="(item,index) in detail.relation">
            <el-form-item :label="'联系人'+(index+1)+':'" class="demofrom">
            </el-form-item>
            <el-form-item label="姓名" class="demofrom">
              {{item.name}}
            </el-form-item>
            <el-form-item label="电话:" class="demofrom">
              {{item.mobile}}
            </el-form-item>
            <el-form-item label="关系:" class="demofrom">
              {{item.relation_name}}
            </el-form-item>
          </em>
        </el-form>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <el-collapse v-model="activeText" @change="handleChange">
            <el-collapse-item title="当期付款信息" name="3">
              <el-form status-icon label-width="100px">
                <el-form-item label="应付款时间:" class="demofrom">
                  {{payment_info.time_date}}
                </el-form-item>
                <el-form-item label="应付款金额:" class="demofrom">
                  {{payment_info.money}}
                </el-form-item>
                <el-form-item label="是否已付款:" class="demofrom" v-if="payment_info.is_paid==1">
                 已付款<el-image :src="payment_info.attach_path"
                  style="width: 50px;height: 50px;" @click="openImageDialog(payment_info.attach_path)"></el-image>
                </el-form-item>
                <el-form-item label="是否已付款:" class="demofrom" v-if="payment_info.is_paid==0">
                 未付款
                </el-form-item>
              </el-form>
            </el-collapse-item>
            <el-collapse-item title="大数据分析和异常点" name="1">
              <div>与现实生活一致：与现实生活的流程、逻辑保持一致，；</div>
              <div>在界面中一致：所有的元素和结构需保持一致，比如：。</div>
            </el-collapse-item>
            <el-collapse-item title="信审申请信息" name="2" v-if="detail.order_status>=4">
              <el-form status-icon label-width="100px">
                <el-form-item label="商户名称:" class="demofrom">
                  {{detail.merchant_name}}
                </el-form-item>
                <el-form-item label="服务项目:" class="demofrom">
                   <em v-for="(item,index) in project.service_list">({{item.project_name}})</em>
                </el-form-item>
                <el-form-item label="项目金额:" class="demofrom">
                  {{detail.project.total_money}}
                </el-form-item>
                <el-form-item label="订单期数:" class="demofrom">
                  {{detail.project.total_period}}
                </el-form-item>
                <el-form-item label="月还款金额:" class="demofrom">
                  {{period_money}}
                </el-form-item>
                <el-form-item label="总债权金额:" class="demofrom">
                  {{detail.project.total_money}}
                </el-form-item>
                <el-form-item :label="'开始还款日:'+eight" class="demofrom">
                  <em v-if="this.eight==0">{{payment_date|formatDateYearMonthDay}} 23:59:59前</em>
                  <em v-if="this.eight==1">{{payment_date|formatDateYearMonth}} 23:59:59前</em>
                </el-form-item>
                <el-form-item label="每期还款日:" class="demofrom">
                  每月的{{pay_day}}号23:59:59前还款
                </el-form-item>
                <el-form-item label="最终还款日:" class="demofrom">
                  <b v-if="this.eight==0">{{paid_date|formatDateYearMonthDay}} 23:59:59前</b>
                  <b v-if="this.eight==1">{{paid_date|formatDateYearMonth}} 23:59:59前</b>
                </el-form-item>
              </el-form>
            </el-collapse-item>
          </el-collapse>
          <el-tabs v-model="activeTabs" type="card" @tab-click="handleClick">
            <el-tab-pane label="催收跟踪" name="first" v-if="payment_info.is_paid==0">
              <el-form ref="dataForm" :model="form" label-width="90px" :rules="rules">
                <el-form-item label="催收结果">
                  <el-radio v-model="form.is_result" label="1">可联承诺</el-radio>
                  <el-radio v-model="form.is_result" label="2">暂时失联</el-radio>
                  <el-radio v-model="form.is_result" label="3">拒绝还款</el-radio>
                </el-form-item>
                <el-form-item label="催收备注:" prop="content">
                  <el-input type="textarea" v-model="form.content"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">立即创建</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="订单记录" name="second">
              <el-table :key="tableRecord" v-loading="listRecordLoading" :data="record" border fit
                highlight-current-row style="width: 100%;">
                <el-table-column label="管理类别" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.type_name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作人" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作内容" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.content }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="创建时间" class-name="status-col">
                  <template slot-scope="{row}">
                    {{ row.create_time|formatDate }}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="催款记录" name="three">
              <el-table :key="tableRecord" v-loading="listRecordLoading" :data="collection_list" border fit
                highlight-current-row style="width: 100%;">
                <el-table-column label="催收人员" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.admin_name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="催收时间" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.create_time|formatDate }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="催收结果" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.result_name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="催收备注" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.content }}</span>
                  </template>
                </el-table-column>
              </el-table>

            </el-tab-pane>
            <el-tab-pane label="分期记录" name="four">
              <el-table :key="tableRecord" v-loading="listRecordLoading" :data="paid_list" border fit
                highlight-current-row style="width: 100%;">
                <el-table-column label="分期金额" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.money }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="付款时间" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.time_date }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="是否付款" align="center">
                  <template slot-scope="{row}">
                    <span v-if="row.is_paid==1">已付款</span>
                    <span v-if="row.is_paid==0">未付款</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <el-collapse v-model="activeImage" @change="handleChange" v-if="detail.order_status>=4">
            <el-collapse-item title="术后照片" name="33">
              <div style="text-align: center;">术后照片:<el-image :src="item.path" v-for="(item,index) in operation" style="width: 50px;height: 50px;"
                  @click="openImageDialog(item.path)"></el-image>
              </div>
            </el-collapse-item>
            <el-collapse-item title="合同信息" name="22">
              <div style="text-align: center;">分期付款协议:<el-image :src="item.path" v-for="(item,index) in contract.fenqi"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">手术消费单:<el-image :src="item.path" v-for="(item,index) in contract.shoushu"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">不是学生承诺书:<el-image :src="item.path" v-for="(item,index) in contract.student"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">术后确认单:<el-image :src="item.path" v-for="(item,index) in contract.comfire_order"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">手术知情同意书:<el-image :src="item.path" v-for="(item,index) in contract.shoushu_agree"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">手术通知单:<el-image :src="item.path" v-for="(item,index) in contract.shoushu_tongzhi"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">LOGO:<el-image :src="item.path" v-for="(item,index) in contract.logo"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">顾客服务费照片:<el-image :src="item.path" v-for="(item,index) in contract.service"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">承诺视频:<em v-for="(item,index) in contract.promise_video"><button type="primary"
                    @click="openVideoDialog(item.path)">视频{{index+1}}</button></em> </div>

            </el-collapse-item>
            <el-collapse-item title="信审申请信息(点击图片查看大图)" name="11">
              <div style="text-align: center;">通讯录:<em v-for="(item,index) in project.tongxunlu"><button type="primary"
                    @click="openVideoDialog(item.path)">视频{{index+1}}</button></em> </div>
              <div style="text-align: center;">通话记录:<em v-for="(item,index) in project.tonghuajilu"><button type="primary"
                    @click="openVideoDialog(item.path)">视频{{index+1}}</button></em></div>
              <div style="text-align: center;">身份证: <el-image :src="item.path" v-for="(item,index) in project.idcard_zheng"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
                <el-image :src="item.path" v-for="(item,index) in project.idcard_fan" style="width: 50px;height: 50px;"
                  @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">芝麻分:<el-image :src="item.path" v-for="(item,index) in project.zhimafen"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">联系人1:<el-image :src="item.path" v-for="(item,index) in project.relation1"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">联系人2:<el-image :src="item.path" v-for="(item,index) in project.relation2"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">联系人3:<el-image :src="item.path" v-for="(item,index) in project.relation3"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">手持照片:<el-image :src="item.path" v-for="(item,index) in project.shouchi"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">淘宝地址:<el-image :src="item.path" v-for="(item,index) in project.taobao_address"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">淘宝购买记录:<el-image :src="item.path" v-for="(item,index) in project.taobao_buy_record"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">微信收入:<el-image :src="item.path" v-for="(item,index) in project.wechat_income"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">微信支出:<el-image :src="item.path" v-for="(item,index) in project.wechat_outcome"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">支付宝收入:<el-image :src="item.path" v-for="(item,index) in project.alipay_income"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">支付宝支出:<el-image :src="item.path" v-for="(item,index) in project.alipay_outcome"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"></el-image>
              </div>
              <div style="text-align: center;">其他:<el-image :src="item.path" v-for="(item,index) in project.other"
                  style="width: 50px;height: 50px;" @click="openImageDialog(item.path)"> </el-image>
              </div>

            </el-collapse-item>


          </el-collapse>
        </div>

      </el-col>
    </el-row>
    <el-dialog title="提示" :visible.sync="dialogImageVisible">
      <el-image :src="path"></el-image>
      <span slot="footer" class="dialog-footer">

        <el-button type="primary" @click="dialogImageVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVideoVisible">
      <div>
        <video-player ref="videoPlayer" :options="playerOptions" :playsinline="true" customEventName="customstatechangedeventname"
          class="video-player vjs-custom-skin">
        </video-player>
      </div>
      <span slot="footer" class="dialog-footer">

        <el-button type="primary" @click="dialogVideoVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {
    fetchOrderCollectionDetail,
    submitCollectionRecord
  } from '@/api/collection'
  import 'video.js/dist/video-js.css'
  import 'vue-video-player/src/custom-theme.css'
  import {
    videoPlayer
  } from 'vue-video-player';
  import {
    formatDate
  } from '@/utils/formatDate.js'
  export default {
    data() {
      return {
        form: {
          is_result: '1',
          pay_id: '',
          content: ''
        },
        detail: {

        },
        sale_list: [],
        eight: 0,
        project: [],
        contract: [],
        operation: [],
        tableRecord: 1,
        listRecordLoading: true,
        record: [],
        payment_info:[],
        paid_list: [],
        collection_list: [],
        activeTabs: 'first',
        activeImage: ['11'],
        activeText: ['1', '2', '3'],
        dialogImageVisible: false,
        dialogVideoVisible: false,
        path: null,
        drawer: false,
        src: null,
        playerOptions: {
          // videojs options
          autoplay: true,
          muted: false,

          language: 'zh-CN',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: ""
          }],

          poster: "/static/images/author.jpg",
          controlBar: {
            timeDivider: true, // 当前时间和持续时间的分隔符
            durationDisplay: true, // 显示持续时间
            remainingTimeDisplay: false, // 是否显示剩余时间功能
            fullscreenToggle: true // 是否显示全屏按钮
          }
        },
        rules: {
          content: [{
            required: true,
            message: '催收备注必须填写',
            trigger: 'blur'
          }]
        }
      };
    },
    components: {
      videoPlayer, // 注册组件
    },
    filters: {
      formatDate(time) {
        time = time * 1000
        let date = new Date(time)

        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
      formatDateYearMonth(time) {

        let date = new Date(time)
        return formatDate(date, 'yyyy-MM-28')
      },
      formatDateYearMonthDay(time) {

        let date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd')
      }
    },
    computed: {
      period_money: function() {
        if (this.detail.project.total_period == null) {
          return 0;
        } else {
          return parseFloat(this.detail.project.total_money / this.detail.project.total_period).toFixed(2)
        }
      },
      payment_date: function() {
        var date = new Date(this.detail.project.create_time * 1000)
        var day = date.getDate()


        if (day <= 28) {
          this.eight = 0
          this.pay_day = day
        } else {
          this.eight = 1
          this.pay_day = 28
          console.log("aaa")
        }
        this.paid_date = new Date(this.detail.project.create_time * 1000).setMonth(new Date(this.detail.project.create_time *
          1000).getMonth() + parseInt(this.detail.project.total_period))
        return new Date(this.detail.project.create_time * 1000).setMonth(new Date(this.detail.project.create_time *
          1000).getMonth() + 1);
      }
    },
    created() {
      this.getOrderDetail()
    },
    methods: {
      openImageDialog(path) {
        this.dialogImageVisible = true
        this.path = path
      },
      openVideoDialog(path) {

        this.dialogVideoVisible = true
        this.playerOptions.sources[0].src = path
        console.log(this.playerOptions.sources.src)
      },
      onSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            submitCollectionRecord(this.form).then(resp => {
              this.$notify({
                title: 'Success',
                message: 'Created Successfully',
                type: 'success',
                duration: 2000,
                onClose: this.getOrderDetail()
              })
            })
            // console.log(this.form)
          }
        })
      },
      resetForm() {
       
        this.form.content = null;
        this.form.is_result = "1";
      },
      getOrderDetail() {
        let order_id = this.$route.params.order_id
        let pay_id = this.$route.params.pay_id
        fetchOrderCollectionDetail(order_id, pay_id).then(resp => {
          this.detail = resp.data.detail
          this.project = resp.data.project
          this.record = resp.data.record
          this.contract = resp.data.contract
          this.sale_list = resp.data.sale
          this.collection_list = resp.data.collect
          this.paid_list = resp.data.payment
          this.payment_info=resp.data.info
          console.log("ddddddddddddddddd")

          this.operation = resp.data.oper.attach_ids
          console.log(this.operation)
          this.form.order_id = order_id
          this.form.pay_id = pay_id
          if ((this.payment_info.is_paid == 0) ) {
            this.activeTabs = "first";
          } else {
            this.activeTabs = "second";
          }
          this.resetForm()
          console.log("dddddddddd" + this.detail.order_status)
          if (this.detail.order_status >= 8) {
            this.activeImage.push("22")
          }
        })


        this.listRecordLoading = false
      },
      handleChange(val) {
        console.log(val);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }


    }
  }
</script>

<style>
  .demofrom {
    height: 15px;
  }

  .input_video {
    width: 400px;
    height: 400px;
    margin: 0 auto;

  }
</style>
